<template>
	<view class="requirementDetails">
		<view class="requirementDetails_1">
			<view class="details">
				<view class="top">
					<view class="left">
						{{data.obj.appVpsDemand.title}}
						<text>{{data.obj.appVpsDemand.sellType == 'ONLINE'?'线上':'线下'}}</text>
						<text>兼职</text>
					</view>
					{{data.obj.appVpsOrder.state == 'COMPLETE_OK'?'已评价':''}}
				</view>
				<view class="price">
					{{data.obj.appVpsDemand.price}}{{data.obj.appVpsDemand.pricingUnit?'/'+data.obj.appVpsDemand.pricingUnit:''}}<text>{{data.obj.appVpsDemand.number}}{{data.obj.appVpsDemand.pricingUnit}}</text>
				</view>
				<view class="name">
					<view class="left">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+(data.isGyz?data.obj.receiveUser.avatarId:data.obj.releaseUser.avatarId)"
							mode="aspectFill"></image>
					</view>
					<view class="right">
						{{data.isGyz?data.obj.receiveUser.userName:data.obj.releaseUser.userName}}
						<text>{{data.isGyz?'服务者':'雇佣者'}}</text>
					</view>
				</view>
				<view  class="view" >
					{{data.isGyz?'接单时间':'需求时间'}}
					<text>{{data.isGyz?data.obj.appVpsOrder.startTime:data.obj.appVpsDemand.serviceTime}}</text>
				</view>
				<view class="view">
					地址：
					<text>{{data.obj.appVpsDemand.address}}</text>
				</view>
				<view class="view">
					订单号：
					<text>{{data.obj.appVpsOrder.orderNo}}</text>
				</view>
			</view>
			<view class="describe">
				需求描述
				<text>{{data.obj.appVpsDemand.content}}</text>
			</view>
			<view class="img">
				需求凭证
				<view class="imgs">
					<view class="" v-for="(item,index) in data.obj.appVpsDemand.attachmentIds.split(',')" :key="index">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="img" v-if="data.obj.appVpsOrder && data.obj.appVpsOrder.attachmentIds">
				完成凭证
				<view class="imgs">
					<view class="" v-for="(item,index) in data.obj.appVpsOrder.attachmentIds.split(',')" :key="index">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="score" v-if="data.obj.appVpsOrder.state == 'COMPLETE_OK'">
				评分
				<view class="">
					<text>分数：</text>
					<image v-for="(item,index) in 5" :key="index"
						:src="data.obj.appVpsOrder.scoring>=index+1?'/static/img/index/157.png':'/static/img/index/158.png'"
						mode="widthFix"></image>
				</view>
			</view>
			<view class="info">
				其他信息
				<view class="">
					创建时间
					<text>{{data.obj.appVpsDemand.createTime}}</text>
				</view>
				<view class="">
					接单时间
					<text>{{data.obj.appVpsOrder.startTime}}</text>
				</view>
				<view class="" v-if="data.obj.appVpsOrder.endTime">
					完成时间
					<text>{{data.obj.appVpsOrder.endTime}}</text>
				</view>
			</view>
		</view>
		<view class="bot">
			<text @tap="customerService">联系对方</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { queryVpsOrderItem } from '@/utils/api/map'
	import {
		reactive,
	} from 'vue';
	const data = reactive<any>({
		httpUrl: getApp().globalData.baseUrl,
		obj: {},
		isGyz:false
	})
	onLoad(({ id }) => {
		data.id = id;
		queryVpsOrderItem({ data: { id } }).then((res) => {
			if(uni.getStorageSync('userId') == res.data.releaseUser.id){
				data.isGyz = true
			}
			data.obj = res.data;
		})
	})
	const customerService = () => {
		let id = '';
		if(data.obj.receiveUser.id != uni.getStorageSync('userInfo').userId){
			id = data.obj.receiveUser.id;
		}
		if(data.obj.releaseUser.id != uni.getStorageSync('userInfo').userId){
			id = data.obj.releaseUser.id;
		}
		const conversationID = `C2C${id}`;
		uni.navigateTo({ url: `/pages/TUIKit/components/TUIChat/index?conversationID=${conversationID}&userId=${id}&messageType=demand&messageId=${data.id}` });
	}
</script>

<style lang="scss">
	.requirementDetails {
		padding: 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		>.bot{
			background: #fff;
			margin-top: 30rpx;
			text{
				display: inline-block;
				width: 100%;
				line-height: 80rpx;
				background: #F4F6FA;
				color: #595959;
				text-align: center;
				font-size: 32rpx;
				border-radius: 80rpx;
			}
		}
		.requirementDetails_1{
			flex: 1;
			overflow: auto;
		}
		.details {
			border-radius: 24rpx;
			padding: 24rpx;
			border: 2rpx solid #333;

			.view {
				font-size: 32rpx;
				color: #595959;
				display: flex;
				justify-content: space-between;
				margin-top: 28rpx;

				text {
					flex: 1;
					margin-left: 20rpx;
					font-size: 32rpx;
					color: #595959;
				}
			}

			.name {
				display: flex;
				align-items: center;

				.left {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					background: #ccc;
					margin-right: 16rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.right {
					display: flex;
					font-size: 36rpx;
					flex-direction: column;

					text {
						color: #8C8C8C;
						margin-top: 8rpx;
					}
				}
			}

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 36rpx;
					display: flex;
					align-items: center;

					text {
						width: 80rpx;
						line-height: 48rpx;
						text-align: center;
						margin-left: 12rpx;
						background: #F4F6FA;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #8C8C8C;
					}
				}

				color: #8C8C8C;
			}

			.price {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #6B64D3;
				margin: 24rpx 0;

				text {
					width: 70rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 8rpx;
					background: #E4E2FC;
					color: #6B64D3;
					font-size: 24rpx;
					margin-left: 12rpx;
				}
			}

			.bot {}
		}

		.describe {
			margin-top: 64rpx;
			font-size: 42rpx;
			color: #000000;
			display: flex;
			flex-direction: column;

			text {
				color: #595959;
				font-size: 32rpx;
				margin-top: 16rpx;
				line-height: 1.5;
			}
		}

		.img {
			font-size: 42rpx;
			color: #000000;
			margin: 64rpx 0;

			.imgs {
				display: flex;
				flex-wrap: wrap;

				view {
					margin-top: 16rpx;
					width: 168rpx;
					height: 168rpx;
					border-radius: 12rpx;
					background: #ccc;
					margin-right: 24rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}
			}
		}

		.score {
			font-size: 42rpx;
			color: #000000;

			view {
				display: flex;
				align-items: center;
				margin-top: 16rpx;

				text {}

				image {
					margin-left: 12rpx;
					width: 36rpx;

				}
			}
		}

		.info {
			margin-top: 64rpx;
			font-size: 42rpx;
			color: #000000;

			view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #595959;
				font-size: 32rpx;
				margin-top: 16rpx;

				text {
					color: #595959;
					font-size: 32rpx;
				}
			}
		}

	}
</style>